<template>
	<view class="page">
		<u-subsection :list="navlist" :current="current" mode="subsection" @change="sectionChange"></u-subsection>
		
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<view v-if="list.length == 0">
				<view style="height: 100upx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes" v-for="(item,index) in list" :key="index" @click="detail(item.id)">
				<view class="time">{{item.time}}</view>
				<view class="box">
					<view class="uniBtn">
						<view>{{item.title}}</view>
						<view v-if="item.type==0">国家电网</view>
						<view v-else-if="item.type==1">南方电网</view>
					</view>
					<view class="uniBtn" style="margin: 15upx 0;">
						<view>{{item.huhao}}</view>
						<view>￥{{item.money2}}</view>
					</view>
					<view class="uniBtn base">
						<!-- <view>订单超时未支付，系统自动取消</view> -->
						<view class="stu" v-if="item.c_status == 0">待充值</view>
						<view class="stu stu1" v-else-if="item.c_status == 1">已充值</view>
						<view class="stu stu2" v-else-if="item.c_status == 2">充值失败</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navlist: [{name: '未支付',id:0}, {name: '已支付',id:1}, {name: '已退款',id:3}],
				current: 0,
				typeid:0,
				
				list:[],
				page: 1,
				limit: 20,
				length: true
			}
		},
		async onLoad(option) {
			if(option.active){
				this.current = option.active;
				this.typeid = this.navlist[option.active].id;
			}
			await this.getList();
		},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉')
				// 关闭下拉
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 切换
			sectionChange(index){
				this.current = index;
				this.typeid = this.navlist[index].id;
				// console.log(this.typeid)
				this.page = 1;
				this.list = [];
				this.getList();
			},
			// 列表
			async getList() {
				let res = await this.$api.orderlist({
					uid:uni.getStorageSync("tokenUid"),
					page: this.page,
					listRows: this.limit,
					status:this.typeid
				});
				if (res.code == 200) {
					this.length = res.data.length == this.limit;
					this.list.push(...res.data);
				}
			},
			// 上拉加载
			scrolltolower(){
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 详情
			detail(id){
				uni.navigateTo({
					url:'/pages/order/detail/detail?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.contentbox {
	flex: 1;
	overflow: hidden;
	padding: 30upx;
}

.boxes{
	border: 1px solid #EAEAEA;
	border-radius: 5upx;
	margin-bottom: 30upx;
	
	.time{
		padding: 20upx;
		border-bottom: 1px solid #EAEAEA;
	}
	.box{
		padding: 20upx;
		
		.base{
			font-size: 24upx;
			justify-content: flex-end;
		}
		.stu{
			background: #FD6CA8;
			color: #fff;
			padding: 10upx 0upx;
			border-radius: 20upx;
			text-align: center;
			width:130upx;
		}
		.stu1{
			background: #3C9CFF;
		}
		.stu2{
			background: #A09393;
		}
	}
}
</style>
